<template>
  <div class="content mar_10">
    <a href="#" v-if="topProducts.list.length > 0" @click.prevent="toProductDetail(topProducts.list[0].id)">
    <div class="h_l_img">

      <div class="img">
        <img :src="url+topProducts.list[0].fileName" width="188" height="188" />
      </div>
      
      <div class="pri_bg" style="width: 150px;">
        <span class="price fl">￥{{ topProducts.list[0].price }}</span>
        <span class="fr">{{ topProducts.list[0].name }}</span>
      </div>
    </div>
    </a>
    <div class="hot_pro">
      <div id="featureContainer">
        <div id="feature">
          <div id="block">
            <div id="botton-scroll">
              <ul class="featureUL">
                <li class="featureBox" v-for="product in topProducts.list.slice(1)">
                  <!-- 点击查看商品详情 -->
                  <a href="#" @click.prevent="toProductDetail(product.id)">
                  <div class="box">
                    <div class="h_icon">
                      <img src="/images/hot.png" width="50" height="50" />
                    </div>
                    <div class="imgbg">
                     <img :src="url + product.fileName" width="160" height="136" />
                    </div>
                    <div class="name">
                        <h2>{{ product.name }}</h2>
                        {{product.description}}
                    </div>
                    <div class="price">
                      <span>￥<span>{{ product.price }}</span>
                    <!-- <span  style="font-size: small;">库存：{{ product.stock }}</span> -->
                    </span> 
                    </div>
                  </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter();
const url = 'http://192.168.12.159:83/';

const topProducts = ref({
    pageNum: 1,
    pageSize: 5,
    list: []// 商品列表
  
})//pageBean<product>


//得到最新的5条商品信息
const getTopProducts = async () => {
  try{
  const res = await axios.get('/api/proList?pageNum=1&pageSize=5')
  topProducts.value = res.data//pageBean<product>
    console.log(topProducts.value);
    
  }catch (error) {
    console.error('获取热门商品失败:', error);
    // 出错时使用默认数据
    topProducts.value = {
      pageNum: 1,
      pageSize: 5,
      list: [
        { id: 0, name: '测试商品', description: '测试商品描述', price: '199.00' },
        { id: 1, name: '默认商品1', description: '商品描述1', price: '99.00' },
        { id: 2, name: '默认商品2', description: '商品描述2', price: '199.00' },
        { id: 3, name: '默认商品3', description: '商品描述3', price: '299.00' }
      ]
    };
  }
}

onMounted(() => {
  getTopProducts()
})

function toProductDetail(id){
  router.push({
    path: '/productDetail',
    query: {
      id:id
    }
  })
}
</script>

<style>
</style>